<template>
    <div class="order-rescind">
        <el-dialog
            :visible.sync="is_show"
            width="500px"
            title="订单撤案申请"
            @closed="closed"
            center
            append-to-body
        >
            <el-form
                :model="form"
                :rules="rules"
                label-position="top"
                ref="form">
                <el-form-item
                    label="撤案申请原因"
                    prop="reason"
                >
                    <el-input
                        type="textarea"
                        v-model="form.reason"
                        :rows="4"
                        maxlength="300"
                        show-word-limit
                        resize="none"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="撤案申请对比文件（请提供与案件相同或相似的对比文件）"
                    prop="fileList"
                >
                    <upload-file ref="upload-file" @upChange="upChange" v-if="is_show" :limit="5"></upload-file>
                </el-form-item>
            </el-form>
            <template slot="footer">
                <el-button @click="is_show = false">取消</el-button>
                <el-button type="primary" @click="submit" v-no-more-click:3000 :loading="btnLoading">确认</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import uploadFile from '~/components/upload-file'
import axios from "axios"
export default {
    components: {
        uploadFile
    },
    data() {
        return {
            baseUrl: global.baseurl,
            order_id: 0,
            is_show: false,
            form: {
                reason: '',
                fileList: []
            },
            rules: {
                reason: [{required: true, message: '请输入撤案申请原因', trigger: 'blur'}],
                fileList: [{required: true, message: '请上传撤案申请说明文件', trigger: 'blur'}],
            },
            btnLoading: false
        }
    },
    methods: {
        showOn(data) {
            this.order_id = data.id
            this.is_show = true
        },
        submit() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    if (this.form.fileList.length == 0) {
                        return this.$message({
                            type: 'error',
                            message: '请上传撤案申请对比文件'
                        })
                    }
                    this.subPost()
                }
            })
        },
        subPost() {
            let form = new FormData();
            this.form.fileList.forEach((v, i) => {
                if (i > 0) {
                    form.append(`file${i+1}`, v.raw)
                } else {
                    form.append('file', v.raw)
                }
            })
            this.btnLoading = true
            form.append('reason', this.form.reason)
            axios({
                method: "post",
                url: this.baseUrl + `/api/order/${this.order_id}/agent/application/end`,
                data: form,
                headers: {
                    "Content-Type": "multipart/form-data",
                    Authorization: "Bearer " + this.$store.state.token
                }
            }).then(res => {
                if (res.data.code==200) {
                    this.$message({
                        type: 'success',
                        message: '撤案申请提交成功，请您耐心等待流程人员审核'
                    })
                    this.btnLoading = false
                    this.$emit('rescind', res.data.data)
                    this.is_show = false
                } else {
                    this.btnLoading = false
                    this.$message({
                        type: 'error',
                        message: res.data.message
                    })
                }
            }).catch(e => {
            })
        },
        upChange(data) {
            this.form.fileList = data.fileList
        },
        closed() {
            this.$refs['form'].resetFields()
        }
    }
}
</script>

<style lang="less" scoped>
.order-rescind {
    /deep/.el-dialog {
        .el-dialog__body {
            height: 400px;
            padding-bottom: 0;
            overflow-y: auto;
            .el-form-item__label {
                line-height: 20px;
            }
        }
        .el-dialog__footer {
            padding-top: 0;
            text-align: center;
        }
    }
}
</style>
